$sidebar-bg-image = hexo-config('sidebar.bg_image');
$sidebar-bg-position = hexo-config('sidebar.bg_position');

.sidebar {
  position: fixed;
  overflow-y: auto;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20rem;
  background-color: rgba(white, 0.9);
  background-image: url($sidebar-bg-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: convert($sidebar-bg-position);
  text-align: center;
  z-index: $sidebar-z-index;
  the-transition();
  the-box-shadow();

  +mobile() {
    background-color: white;
    left: -20rem;
    transform: translateX(0);
  }

  &-translate {
    padding-left: 20rem;

    +mobile() {
      padding-left: 0;
    }
  }

  &-toggle {
    display: none;

    +mobile() {
      display: flex;
    }

    &-fixed {
      position: fixed;
      left: 0.8rem;
      top: 0.6rem;
      line-height: 1;
      z-index: $menu-btn-z-index;
      cursor: pointer;
    }
  }

  .sidebar-panel {
    padding: 0.5rem;
    display: none;
  }

  .sidebar-panel-active {
    display: block;
  }

  .links {
    display: block;

    &-item {
      display: inline-flex;

      .icon {
        width: 2rem;
        height: 2rem;
      }
    }
  }

  .links-of-author {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .icon {
      width: 1.5rem;
      height: 1.5rem;
    }

    &-item {
      line-height: 1;
      font-size: 0.9rem;
    }
  }
}

.sidebar-open {
  +mobile() {
    .sidebar {
      transform: translateX(20rem);
      visibility: visible;
    }
  }
}

.is-home {
  .sidebar {
    left: -20rem;
    transform: translateX(0);
    visibility: hidden;
  }

  .sidebar-toggle {
    display: flex;
  }

  .sidebar-translate {
    the-transition();
    padding-left: 0;
  }

  .sidebar-open {
    .sidebar {
      transform: translateX(20rem);
      visibility: visible;
    }

    .sidebar-translate {
      padding-left: 20rem;

      +mobile() {
        padding-left: 0;
      }
    }
  }
}
